<template>
  <div class="home6">
    <ul>
      <li @click="choseBuild()">
        <span>楼幢：</span>
        <div>
          <span>{{this.build}}幢</span>
        </div>
      </li>
      <li @click="choseUnit()">
        <span>单元：</span>
        <div>
          <span>{{this.unit}}单元</span>
        </div>
      </li>
      <li @click="choseRoom()">
        <span>房号：</span>
        <div>
          <span>{{this.rooms}}室</span>
        </div>
      </li>
    </ul>
    <mt-popup
      v-model="zhuangShow"
      popup-transition="popup-fade">
      <ul>
        <li value="" v-for="(item,index) in zhuang" @click="goselect1(item)">
          <span>{{item.name}}幢</span>
        </li>
      </ul>
    </mt-popup>
    <mt-popup
      v-model="danyuanShow"
      popup-transition="popup-fade">
      <ul>
        <li value="" v-for="(item,index) in danyuan" @click="goselect2(item)">
          <span v-show="item.pid===zid">{{item.name}}单元</span>
        </li>
      </ul>
    </mt-popup>
    <mt-popup
      v-model="fanghaoShow"
      popup-transition="popup-fade">
      <ul>
        <li value="" v-for="(item ,index) in fanghao" @click="goselect3(item)">
          <span v-show="item.pid===did">{{item.name}}室</span>
        </li>
      </ul>
    </mt-popup>
  </div>
</template>
<style lang="scss">
  .home6 {
    width: 100%;
    background: red;
    margin-top: 50px;
  }
</style>
<script>
  import {Indicator} from 'mint-ui'

  export default {
    name: 'Home6',
    data() {
      return {
        zhuangShow: false,
        danyuanShow: false,
        fanghaoShow: false,   // 这个是判断遮罩层是否显示
        zhuang: [],
        danyuan: [],
        fanghao: [],      //这个是获取数据存放的空数组
        zid: '',
        did: '',
        rid: '',    // 存放各个id
        build: '',
        unit: '',
        rooms: ''  // 存放遮罩层上的数据内容
      }
    },
    created() {
      this.getdatas();
    },
    methods: {
      getdatas() {
        const url = 'https://ynwx.zgwyzxw.cn/index.php/home/house_Auth/getHouse?id=204'
        this.$http.get(url).then(res => {
          console.log(res)
          if (res.status === 200) {
            this.zhuang = res.data.data.zhuang;    //  幢
            this.danyuan = res.data.data.danyuan;  // 单元
            this.fanghao = res.data.data.fanghao;  // 房号
//            console.log(this.fanghao)
//            Indicator.open({
//              text: '数据读取中...',
//              spinnerType: 'fading-circle'
//            });
//            Indicator.close();
          }
        }).catch(error => {
          console.log(error)
        })
      },
      choseBuild() {
        this.zhuangShow = true    // 幢
      },
      choseUnit() {
        this.danyuanShow = true    // 单元
      },
      choseRoom() {
        this.fanghaoShow = true    // 房号
      },
      goselect1(item) {
        this.build = item.name;
        this.zid = item.id;
        this.zhuangShow = false    // 幢
      },
      goselect2(item) {
        this.unit = item.name;
        this.did = item.id;
        this.danyuanShow = false  // 单元
      },
      goselect3(item) {
        this.rooms = item.name;
        this.rid = item.id;
        this.fanghaoShow = false  // 房号
      }
    }
  }
</script>
